<template>
    <Modal :mask-closable="false"
            width="1000"
            v-model="repairDetailListVisible"
            :title="detail == 'detail' ? '查看备件' : '编辑备件'"
            :footer-hide="true"
    >
        <div class="btns clear" v-show="detail == 'edit'">
            <span  class="creatBtnright" @click="handleAdd">
                <span><Icon type="ios-add-circle-outline"/></span>
                <span class="rightbtn">添加</span>
            </span>
        </div>
        <!--表格-->
        <div class="tableContent">
            <Table row-key="id" :columns="columns" :data="dataSource">
                <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" @click="handleEdit(row)" v-show="detail == 'edit'">{{$t('common.Edit')}}</span>
                    <span class="operationBtn" @click="handleDelete(row)" v-show="detail == 'edit'">{{$t('common.Delete')}}</span>
                </template>
            </Table>
        </div>
        <!--编辑备件新增-->
        <add-repair-detail-modal ref="repairDetailModal" @handleRefreshAdd="handleRefreshAdd" @handleRefreshEdit="handleRefreshEdit"/>
        <Modal :mask-closable="false"
                v-model="deleteVisible"
                title=""
        >
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                    <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                    <span>{{$t('common.sureDelete')}}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default"  @click="deleteVisible=false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loadingDelete" @click="handleDeleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </Modal>
</template>

<script>
    import AddRepairDetailModal from "./addRepairDetailModal";
    export default {
        name: "repairDetailListModal",
        components: {AddRepairDetailModal},
        data() {
            return {
                detail: '',
                deleteId: '',
                id: '',
                workorderNo: '',
                repairDetailListVisible: false,
                deleteVisible: false,
                loadingDelete: false,
                columns: [
                    {
                        title: '物料名称',
                        key: 'maName',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        // minWidth: 120,
                    },

                    {
                         title: `${ this.$t('spareParts.usageAmount') }`,
                        key: 'useNum',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: '品牌',
                        key: 'brand',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        align: 'center',
                        // minWidth: 120
                    },
                ],
                dataSource: [],
            }
        },
        methods: {
            show(row, status) {
                this.id =row.id
                this.detail = status
                this.workorderNo = row.workorderNo
                this.dataSource = []
                this.repairDetailListVisible = true
                this.getDetail(row.id)
            },
            getDetail(id) {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderRecord/detailById',
                    params: {
                        id
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.dataSource = res.data ? res.data : []
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                })
            },
            handleAdd() {
                this.$refs.repairDetailModal.add({id: this.id,workorderNo: this.workorderNo})
            },
            handleEdit(row) {
                this.$refs.repairDetailModal.edit(row,{id: this.id,workorderNo: this.workorderNo})
            },
            handleDelete(row) {
                this.deleteVisible = true
                this.deleteId = row.id
            },
            handleDeleteOk() {
                this.axios({
                    method: 'delete',
                    url: '/workorder/workorderRecord/delete',
                    params: {
                        id: this.deleteId
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.$Message.success('删除成功！')
                        this.dataSource = this.dataSource.filter(item => item.id != this.deleteId)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.deleteVisible = false
                })
            },
            handleRefreshAdd(data) {
                console.log(data)
                this.dataSource.push(data)
            },
            handleRefreshEdit(data) {
                this.dataSource = this.dataSource.map(item => {
                    if (item.id == data.id) {
                        return {
                            ...data
                        }
                    }else {
                        return {
                            ...item
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
